<template>
	<view :class="['active-area bg-white', type]" :style="{'background-color':bgColor}">
		<view class="active-hd flex row-between" v-if="title">
			<view class="active-hd-title" :style="{'color':titleColor}">{{title}}</view>
			<router-link :to="url" v-if="url && type == 'hot'">
				<view class="active-hd-more" :style="{'color':fontColor}">更多 <u-icon name="arrow-right"></u-icon>
				</view>
			</router-link>
		</view>

		<view class="active-con">
			<scroll-view style="white-space: nowrap;" :scroll-x="true" v-if="type == 'hot'">
				<view class="goods-wrap">
					<goods-list :show-bg="false" type="row-hot" :list="list"></goods-list>
				</view>
			</scroll-view>
			<goods-list v-if="type == 'new'" type="new" :list="list" :show-bg="false"></goods-list>
		</view>
		<router-link :to="url" v-if="url && type == 'new'">
			<view class="bg-white xs flex row-center more">查看更多 <u-icon name="arrow-right">
				</u-icon>
			</view>
		</router-link>
	</view>
</template>

<script>
	export default {
		name: "active-area",
		props: {
			title: String,
			url: String,
			list: {
				type: Array,
				default: () => ([])
			},
			type: String,
			bgColor: {
				type: String,
				default: "#fff"
			},
			titleColor: {
				type: String,
				default: "#32302f"
			},
			fontColor: {
				type: String,
				default: "#b1a392"
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.active-area {
		padding: 20rpx 24rpx;
		border-radius: 16rpx;
		overflow: hidden;

		.active-hd-title {
			font-size: 30rpx;
			font-weight: 700;
			font-family: 宋体;
			color: #32302f;
		}

		.active-hd-more {
			font-size: 22rpx;
			color: #b1a392;
		}

		.goods-wrap {
			margin-top: 20rpx;
		}

		.more {
			height: 80rpx;
			border-top: $-solid-border;
		}
	}
</style>